<script setup >
  import {onMounted,ref} from 'vue'
  import {getPageListApi} from '@/apis/message.js'

  // 请求接口的参数信息
  const truckMessageData = ref({
    contentType:201,
    page:1,
    pageSize:5
  })
  // 得到的列表
  const pageList = ref({})
  // 是否为空数组
  const isEmpty = ref(false)
  // 每次触底，请求的新页数
  const newPage = ref(1)
  // 判断是否加载完成
  const isLoaded = ref(false)
  // 节流标识
  let flag = false
  // 下拉刷新的触发
  let scrollFlag = ref(false)

  onMounted(()=>{
    getPageList(truckMessageData.value)
  })
  // 得到列表的方法
  const getPageList = async(data=truckMessageData.value) => {
    const res = await getPageListApi(data)
  // console.log(res.data);
    pageList.value = res.data
    isEmpty.value = (res.data.items.length === 0)
  }
  // 当页面触底时触发方法
  const scrollEnd = async() => {
    if (flag) {
      console.log('已经中断')
      return
    }
    if (isLoaded.value) return
    flag = true
    newPage.value = newPage.value+1
   const res = await getPageListApi({
      contentType:201,
      page: newPage.value,
      pageSize:5
    })

    // 判断是否加载完毕
    if (res.data.page>=Number(res.data.pages)) {
      isLoaded.value = true
    }
    // 无缝加载
    pageList.value.items = [...pageList.value.items,...res.data.items]
    console.log(res.data);
    flag = false
  }

  // 触发下拉刷新时的方法
  const onScroll = async() => {
    scrollFlag.value = true
    await getPageList()
    scrollFlag.value = false
  }

</script>
<template>
  <scroll-view @refresherrefresh="onScroll" :refresher-triggered="scrollFlag" @scrolltolower="scrollEnd" class="scroll-view" refresher-enabled scroll-y>
    <view class="scroll-view-wrapper">
      <view class="message-action">
        <text class="iconfont icon-clear"></text>
        全部已读
      </view>
      <uni-card v-for="item in pageList.items" :key="item.id"  :border="false" :is-shadow="false">
        <view class="brief">{{ item.content }}</view>
        <view class="extra">
          <text class="time">{{ item.updated }}</text>
          <navigator
            hover-class="none"
            class="link"
            :url="`/subpkg_task/content/index?id=${item.id}`"
            >查看详情</navigator
          >
        </view>
        <template v-slot:title>
          <view class="title" :class="{unread:!item.isRead}" >{{ item.title }}</view>
        </template>
      </uni-card>
      <view v-if="isEmpty" class="message-blank">暂无消息</view>
    </view>
  </scroll-view>
</template>

<style lang="scss" scoped>
  @import './styles.scss';
</style>
